<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建试卷</title>
    <script src="../js/jquery.min.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<style>
    .choosequestion {
        display: none;
        width: 700px;
        height: 700px;
        position: fixed;
        border: #ebebeb solid 1px;
        left: 50%;
        top: 60%;
        background: #ffffff;
        box-shadow: 0px 0px 20px #ddd;
        z-index: 9997;
        transform: translate(-50%, -50%);
    }

    .checkcontent {
        display: none;
        width: 600px;
        height: 600px;
        position: fixed;
        border: #ebebeb solid 1px;
        left: 50%;
        top: 50%;
        background: #ffffff;
        box-shadow: 0px 0px 20px #ddd;
        z-index: 9999;
        transform: translate(-50%, -50%);
    }

    .bgone {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: rgba(0, 0, 0, .3);
    }

    .bgtwo {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: rgba(0, 0, 0, .3);
        z-index: 9998;
    }

    a {
        text-decoration: none;
        color: #000000;
    }

    /*
        .choosequestion-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        } */

    .choosequestion-title, .checkcontent-title {
        width: 100%;
        margin: 10px 0px 0px 0px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        font-size: 18px;
        position: relative;
        cursor: move;
    }

    /* .choosequestion-title span {
        position: absolute;
        font-size: 12px;
        right: -20px;
        top: -30px;
        background: #ffffff;
        border: #ebebeb solid 1px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
    } */

    .choosequestion-title span, .checkcontent-title span {
        position: absolute;
        font-size: 12px;
        right: -20px;
        top: -30px;
        background: #ffffff;
        border: #ebebeb solid 1px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }

    /**************ABCD选项事件***********************  */
    .answerchoose {
        border: 1px solid rgb(204, 204, 204);
        height: 20px;
        margin-top: 5px;
        width: 95%;
        margin-left: 10px;
    }

    .choose {
        background-color: whitesmoke;
        font-size: 18px;
        padding-left: 3px;
        padding-top: -3px;
        color: grey;
    }

    .answer {
        color: rgb(197, 197, 197);
        line-height: 20px;

    }

</style>

<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>创建试卷</legend>
</fieldset>
<!-- ***********************************创建试卷表单***************************************** -->
<form class="layui-form" action="../admin/exampaper?m=createxampaper" method="post">

    <div class="layui-form-item">
        <label class="layui-form-label">试卷名称</label>
        <div class="layui-input-block">
            <input type="text" name="exampapername" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所属题库</label>
        <div class="layui-input-block">
            <select name="course" lay-filter="course">
                <option value="">请选择题库</option>
                <option value="10002">JavaOOP</option>
                <option value="10003">MySQL</option>
                <option value="10004">设计模式</option>
                <option value="10005">Java并发</option>
                <%-- <c:forEach items="${courselist}" var="courselist">
                     <option value="${courselist.course_id}">${courselist.course_name}</option>
                 </c:forEach>--%>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">试卷类型</label>
        <div class="layui-input-block">
            <select name="exampaper_type" lay-filter="exampaper_type">
                <option value="">请选择试卷类型</option>
                <option value="1">完全私有（只有您本人可以管理）</option>
                <option value="2">只读共享（其他老师可以使用管理）</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">试卷总分</label>
        <div class="layui-input-block">
<%--        <span style="margin-top: 100px;padding-top: 30px;"><span>0.00</span> 分(该值不需要计算，系统自动算出)</span>--%>
        <input type="text" name="exampaper_score" lay-verify="title" autocomplete="off" placeholder="100分"
               class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">试卷内容</label>
        <div class="layui-input-block">
            <!-- 点击进入试题选取弹出层 -->
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal addpapercontent">
                <i class="layui-icon"></i>编辑
            </button>
            <table class="layui-table" style="width: 90%;">
                <thead>
                <tr>
                    <th>试题id</th>
                    <th>所属题库</th>
                    <th>试题类型</th>
                    <th>试题内容</th>
                    <th>试题答案</th>
                    <th>试题分值</th>
                    <th>操作（删除）</th>
                </tr>
                </thead>
                <tbody id="demoList">
                <%-- <tr>
                     <td>1</td>
                     <td>java</td>
                     <td>单选题</td>
                     <td>
                         <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
                     </td>
                     <td>A</td>
                     <td>5</td>
                     <td>
                         <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">删除</button>
                     </td>
                 </tr>--%>
                </tbody>
            </table>
<%--            <div id="page1"></div>--%>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">试卷描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" name="exampaper_desc" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
            <button type="button" class="layui-btn layui-btn-primary reback" style="position: absolute;right: 50px">返回</button>
        </div>
    </div>

</form>

<!-- ***********************************试卷选取试题弹出框************************************* -->
<div id="choosequestion" class="choosequestion">
    <div id="titleone" class="choosequestion-title">选取试题
        <span><a href="javascript:void(0);" class="close-loginone">关闭</a></span>
    </div>
    <hr>
    <div class="choosequestion-input-content" style="margin: 5px 5px;">
        <label style="color: rgb(158, 158, 158);">从下面的列表里选取试题</label>
        <div style="margin-top: 20px;">
            <form class="layui-form layui-form-pane" method="POST" action="">
                <!-- <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入试卷名"
                    class="layui-input" style="width: 200px;display: inline-block;margin-right: 20px;margin-left: 20px;"> -->
                <div class="layui-inline" style="margin-right: 20px;">
                    <div class="layui-input-inline">
                        <select name="course" lay-filter="course" class="course">
                            <option value="">请选择题库</option>
                            <option value="10002">JavaOOP</option>
                            <option value="10003">MySQL</option>
                            <option value="10004">设计模式</option>
                            <option value="10005">Java并发</option>

                            <%--<c:forEach items="${courselist}" var="courselist">
                                <option value="${courselist.course_id}">${courselist.course_name}</option>
                            </c:forEach>--%>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-right: 20px;">
                    <div class="layui-input-inline">
                        <select name="questiontype" lay-filter="questiontype" class="questiontype">
                            <option value="">请选择题型</option>
                            <option value="单选题">单选题</option>
                            <option value="多选题">多选题</option>
                            <option value="判断题">判断题</option>
                            <option value="综合题">综合题</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn searchquestion">搜索</button>
            </form>
        </div>
        <!-- 表单 -->
        <hr>
        <!-- 表格 -->
        <table class="layui-table" id="choosequestiontable" lay-size="sm" lay-filter="choosequestiontable"></table>
        <script type="text/html" id="barDemo1">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <%--            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" dataid="0"  dataid="0" onclick="check() class="checkBtn">查看</button>--%>
            <%--            <a class="layui-btn layui-btn-xs" datatype="add" lay-event="edit">添加</a>--%>
            <button class="layui-btn layui-btn-xs add" data-type="add" type="button" lay-event="edit">
                <i class="layui-icon">&#xe61a;</i>添加
            </button>
        </script>
        <button type="button" class="layui-btn layui-btn-normal">批量导入</button>
    </div>
</div>
<!-- 第一个遮盖层 -->
<div id="bgone" class="bgone"></div>
<!-- ***************************************试题内容查看************************************************** -->
<div id="checkcontent" class="checkcontent">
    <div id="titletwo" class="checkcontent-title">试题预览
        <span><a id="closeBtn" href="javascript:void(0);" class="close-logintwo">关闭</a></span>
    </div>
    <hr>
    <div class="checkcontent-input-content" style="width: 90%;">

        <form class="layui-form" action="" method="GET">
            <div class="layui-form-item">
                <label class="layui-form-label">试题id</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="1"
                           class="layui-input qsid" disabled="disabled" width="70%">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">试题类型</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="单选题"
                           class="layui-input qstype" disabled="disabled">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">所属题库</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="Java"
                           class="layui-input qscourse" disabled="disabled">
                    <%--                        查询题库名--%>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">试题题干</label>
                <div class="layui-input-block">
                        <textarea disabled="disabled"
                                  class="layui-textarea qscontent"
                                  style="height: 50px;"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">试题选项</label>
                <div class="layui-input-block">
                    <div style="border: 1px solid rgb(204, 204, 204); height: 120px;">
                        <div class="answerchoose">
                            <span class="choose">A</span>
                            <span class="answera answer">a答案</span>
                        </div>
                        <div class="answerchoose">
                            <span class="choose">B</span>
                            <span class="answerb answer">b答案</span>
                        </div>
                        <div class="answerchoose">
                            <span class="choose">C</span>
                            <span class="answerc answer">c答案</span>
                        </div>
                        <div class="answerchoose">
                            <span class="choose">D</span>
                            <span class="answerd answer">d答案</span>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">试题答案</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="A"
                           class="layui-input qsanswer" disabled="disabled">
                </div>
            </div>
        </form>

    </div>
</div>
<!-- 第二个遮盖层 -->
<div id="bgtwo" class="bgtwo"></div>
</body>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'form', 'layedit', 'laydate', 'laypage', 'layer', 'table'], function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate,
            laypage = layui.laypage;
        var table = layui.table;
//所有题目表单的显示 查看所有试题
        table.render({
            elem: '#choosequestiontable',
            url: '/OnlineExam/admin/exampaper?m=findallquestion&method=1',
            page: true,
            cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'question_content', title: '题干', width: '30%', sort: true}
                , {field: 'user_id', title: '创建人', width: '10%'}
                , {fixed: 'right', width: '15%', align: 'center', toolbar: '#barDemo1'}
            ]]

        })

        //按照条件 查看试题
        $(".searchquestion").click(function () {
            var course = document.querySelector(".course").value;
            var questiontype = document.querySelector(".questiontype").value;
            table.reload('choosequestiontable', {
                elem: '#choosequestiontable',
                url: '/OnlineExam/admin/exampaper?m=findallquestion',
                // id:'myexampaper',
                where: {
                    'method': 2,
                    'course': course,
                    'questiontype': questiontype
                },
                page: true,
                cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'question_content', title: '题干', width: '30%', sort: true}
                    , {field: 'user_id', title: '创建人', width: '10%'}
                    , {fixed: 'right', width: '15%', align: 'center', toolbar: '#barDemo1'}
                ]]

            })
        })
        /*  var course=document.querySelector(".course").value;
          var questiontype=document.querySelector(".questiontype").value;
          table.render({
              elem: '#choosequestiontable',
              url: '/OnlineExam/admin/exampaper?m=findallquestion&method=2&questiontype'+questiontype+'&course'+course,
              page: true,
              cols: [[
                  {type: 'checkbox', fixed: 'left'}
                  , {field: 'question_content', title: '题干', width: '30%', sort: true}
                  , {field: 'user_id', title: '创建人', width: '15%'}
                  , {fixed: 'right', width: '15%', align: 'center', toolbar: '#barDemo1'}
              ]]

          })*/


        //**************** 弹出框设置**********************************
        var addpapercontent = document.querySelector(".addpapercontent");
        var choosequestion = document.querySelector("#choosequestion");
        var checkcontent = document.querySelector("#checkcontent");
        var bgone = document.querySelector(".bgone");
        var bgtwo = document.querySelector(".bgtwo");
        var closeone = document.querySelector(".close-loginone");
        var closetwo = document.querySelector(".close-logintwo");
        var titleone = document.querySelector("#titleone");
        var titletwo = document.querySelector("#titletwo");
        //表单元素
        /*       var qsid = document.querySelector(".qsid").value;
               var qstype = document.querySelector(".qstype").value;
               var qscontent = document.querySelector(".qscontent").value;
               var answera = document.querySelector(".answera").innerHTML;
               var answerb = document.querySelector(".answerb").innerHTML;
               var answerc = document.querySelector(".answerc").innerHTML;
               var answerd = document.querySelector(".answerd").innerHTML;
               var qsanswer = document.querySelector(".qsanswer").value;*/
        // console.log("试题id" + qsid+"--"+qstype+"--"+qscontent+"--"+answera+"--"+answerd+"--"+qsanswer)

        //监听行工具事件

        table.on('tool(choosequestiontable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                // layer.msg('查看操作');
                checkcontent.style.display = 'block';
                bgtwo.style.display = 'block';
                console.log(data);
                document.querySelector(".qsid").setAttribute("value", data.question_id);
                document.querySelector(".qscourse").setAttribute("value", data.course_id);
                document.querySelector(".qstype").setAttribute("value", data.question_type);
                document.querySelector(".qscontent").value = data.question_content;
                document.querySelector(".answera").innerHTML = data.question_optiona;
                document.querySelector(".answerb").innerHTML = data.question_optionb;
                document.querySelector(".answerc").innerHTML = data.question_optionc;
                document.querySelector(".answerd").innerHTML = data.question_optiond;
                document.querySelector(".qsanswer").setAttribute("value", data.question_answer);
            }
               else if (layEvent === 'edit') {
                   layer.msg('添加操作');
               }
        });
        //*************************转移数据***如何实现？********************

        //*************************************************
        addpapercontent.onclick = function () {
            choosequestion.style.display = 'block';
            bgone.style.display = 'block';
        }
        closeone.onclick = function () {
            choosequestion.style.display = 'none';
            bgone.style.display = 'none';
        }
        closetwo.onclick = function () {
            checkcontent.style.display = 'none';
            bgtwo.style.display = 'none';
        }
        titleone.addEventListener('mousedown', function (e) {
            var x = e.pageX - choosequestion.offsetLeft;
            var y = e.pageY - choosequestion.offsetTop;
            //（2）当鼠标移动时，把鼠标的页面中坐标减去  鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                choosequestion.style.left = e.pageX - x + "px";
                choosequestion.style.top = e.pageY - y + "px";
            }

            //（3）鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })
        titletwo.addEventListener('mousedown', function (e) {
            var x = e.pageX - checkcontent.offsetLeft;
            var y = e.pageY - checkcontent.offsetTop;
            //（2）当鼠标移动时，把鼠标的页面中坐标减去  鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                checkcontent.style.left = e.pageX - x + "px";
                checkcontent.style.top = e.pageY - y + "px";
            }

            //（3）鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })

        // ******************返回按钮事件******************************************
// var reback=document.querySelector(".reback");
        $(".reback").click(function () {
            location.href = "http://localhost:8080/OnlineExam/admin/exampaper.jsp";
        })


    })
</script>

</html>